<template lang="html">
    <div id="ShopList" v-loading.fullscreen.lock="loading" element-loading-text="拼命加载中">
        <db-breadcrumb></db-breadcrumb>
        <div class="db-content-inner">
            <div class="filters">
                <div class="filter">
                    <el-input placeholder="店铺名称" v-model="filters.shopName"></el-input>
                </div>
                <div class="filter">
                    <el-input placeholder="地址" v-model="filters.shopAddress"></el-input>
                </div>
                <div class="filter">
                    <el-input placeholder="联系电话" v-model="filters.shopPhone"></el-input>
                </div>
                <el-button type="primary" @click.stop="handleSearch()">搜索</el-button>
                <el-button type="primary" @click="hadnleAdd()">创建</el-button>
            </div>
            <el-table :data="tableData" ref="table" style="width: 100%" stripe border>
                <el-table-column prop="shopName" label="店铺名称" width="180"></el-table-column>
                <el-table-column prop="shopAddress" label="地址"></el-table-column>
                <el-table-column prop="shopPhone" label="联系电话"></el-table-column>
                <el-table-column prop="shopIntro" label="简介"></el-table-column>
                <el-table-column :context="_self" width="150" inline-template label="操作">
                    <div>
                        <el-button size="small" @click="handleEdit($index, row)">编辑</el-button>
                        <el-button size="small" type="danger" @click="handleDelete($index, row)">删除</el-button>
                    </div>
                </el-table-column>
            </el-table>
            <div class="pagination-wrapper" v-show="!loading">
                <el-pagination layout="prev,pager,next,jumper,total" @current-change="handleCurrentChange" :current-page="filters.page" :total="total" :page-size="20">
                </el-pagination>
            </div>
        </div>
        <el-dialog title="保存" v-model="createDialog" size="small">
            <el-form ref="createFrom" :model="form" label-width="80px">
                <el-form-item label="店铺名称:">
                    <el-input placeholder="请输入店铺名称" v-model="form.shopName"></el-input>
                </el-form-item>
                <el-form-item label="店铺地址:">
                    <el-row>
                        <el-col :span="19" style="padding-right:10px">
                            <el-input placeholder="请输入店铺地址" v-model="form.shopAddress"></el-input>
                        </el-col>
                        <el-col :span="5">
                            <el-button type="primary" style="width:100%" :loading="isBtnLoading" @click.stop="transform">{{btnText}}</el-button>
                        </el-col>
                    </el-row>
                </el-form-item>
                <el-form-item label="经纬度:">
                    <el-row>
                        <el-col :span="12" style="padding-right:5px">
                            <el-input placeholder="纬度" v-model="form.lat"></el-input>
                        </el-col>
                        <el-col :span="12" style="padding-left:5px">
                            <el-input placeholder="经度" v-model="form.lon"></el-input>
                        </el-col>
                    </el-row>
                </el-form-item>
                <el-form-item label="店铺电话:">
                    <el-input placeholder="请输入店铺电话" v-model="form.shopPhone"></el-input>
                </el-form-item>
                <el-form-item label="店铺简介:">
                    <el-input placeholder="请输入店铺简介" v-model="form.shopIntro" type="textarea"></el-input>
                </el-form-item>
                <el-form-item label="店铺描述:">
                    <el-input placeholder="请输入店铺描述" v-model="form.describe" type="textarea"></el-input>
                </el-form-item>
                <el-form-item label="店铺图片:">
                    <el-upload action="v1/upload/shopImg" :on-preview="handleImgPreview" :on-remove="handleImgRemove" :on-success="handleImgSuccess" :on-error="handleImgError" :before-upload="handleBeforeUpload" :file-list="imgList" list-type="picture">
                        <el-button size="small" type="primary">点击上传</el-button>
                        <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过5mb</div>
                    </el-upload>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                                          <el-button @click="createDialog = false">取 消</el-button>
                                          <el-button type="primary" @click="handleSave()">确 定</el-button>
                                        </span>
        </el-dialog>
    </div>
</template>

<script>
    import {
        getShopList,
        getShopDetail,
        addShop,
        deleteShop
    } from '../../api/api';
    
    export default {
        data() {
            return {
                filters: {
                    shopName: '',
                    shopAddress: '',
                    shopPhone: '',
                    page:1,
                },
                form: {
                    id: '',
                    shopName: '',
                    shopAddress: '',
                    shopPhone: '',
                    shopIntro: '',
                    shopImg: '',
                    lat: '',
                    lon: '',
                    describe: ''
                },
                tableData: null,
                loading: false,
                createDialog: false,
                imgList: [],
                isBtnLoading: false,
                total:0                
            }
        },
        methods: {
            handleSearch() {
                this.filters.page = 1;
                this.getGrid();
            },
            handleEdit(index, row) {
                this.loading = true;
                getShopDetail(row.id).then(result => {
                    this.loading = false;
                    let {
                        errorMsg,
                        sysCode,
                        data
                    } = result;
                    if (sysCode !== 1) {
                        this.$message.error(errorMsg);
                    } else {
                        // this.form = data;
                        this.createDialog = true;
                        this.form = data;
                    }
                });
            },
            hadnleAdd() {
                this.form = {
                    id: '',
                    shopName: '',
                    shopAddress: '',
                    shopPhone: '',
                    shopIntro: '',
                    shopImg: '',
                    lat: '',
                    lon: '',
                    describe: ''
                };
                this.createDialog = true;
            },
            handleDelete(index, row) {
                this.loading = true;
                deleteShop(row.id).then(result => {
                    this.loading = false;
                    let {
                        errorMsg,
                        sysCode,
                        data
                    } = result;
                    if (sysCode !== 1) {
                        this.$message.error(errorMsg);
                    } else {
                        this.tableData.splice(index, 1);
                        this.$message({
                            type:'success',
                            message:'删除成功'
                        });
                    }
                });
            },
            handleCurrentChange(val) {
                this.filters.page = val;
                this.getGrid();
            },
            handleSave() {
                this.loading = true;
                addShop(this.form).then(result => {
                    this.loading = false;
                    let {
                        errorMsg,
                        sysCode,
                        data
                    } = result;
                    if (sysCode !== 1) {
                        this.$message.error(errorMsg);
                    } else {
                        const msg = this.form.id ? '编辑成功' : '新增成功'
                        this.$message({
                            type: 'success',
                            message: msg
                        })
                    }
                });
            },
            getGrid() {
                this.loading = true;
                var params =  JSON.parse(JSON.stringify(this.filters));
                params.page = params.page - 1;
                console.log('11')
                getShopList(params).then(result => {
                    this.loading = false;
                    let {
                        errorMsg,
                        sysCode,
                        data
                    } = result;
                    if (sysCode !== 1) {
                        this.$message.error(errorMsg);
                    } else {
                        this.tableData = data.content;
                        this.filters.page = data.number +1;
                        this.total = data.numberOfElements;
                    }
                });
            },
            handleImgRemove(file, fileList) {
                console.log(file, fileList);
            },
            handleImgPreview(file) {
                console.log(file);
            },
            handleImgSuccess(res, file, fileList) {
                if (res.sysCode === 1) {
                    this.form.shopImg = res.data[0];
                }
            },
            handleImgError(err, file, fileList) {
    
            },
            handleBeforeUpload(file) {
                var reg = new RegExp(/\.jpg$|\.jpeg$|\.gif$|\.png$|\.bmp$/i)
                if (!reg.test(file.name)) {
                    this.$message.error('请上传图片格式!');
                    return false
                }
    
                if (file.size > (5 * 1024 * 1024)) {
                    this.$message.error('图片最大不能超过5M!');
                    return false;
                }
            },
            transform() {
                this.isBtnLoading = true;
                var geocoder = new qq.maps.Geocoder({
                    complete: (result) => {
                        this.form.lat = result.detail.location.lat;
                        this.form.lon = result.detail.location.lng;
                        this.isBtnLoading = false;
                    }
                });
                geocoder.getLocation(this.form.shopAddress)
            }
        },
        computed: {
            btnText() {
                if (this.isBtnLoading) return '转换中...';
                return '坐标转换';
            }
        },
        mounted() {
            this.getGrid();
        }
    }
</script>

<style lang="scss">
    html * {
        outline: none;
        -webkit-text-size-adjust: none;
        -ms-text-size-adjust: none;
        -moz-size-adjuest: none;
        tap-highlight-color: rgba(0, 0, 0, 0);
        box-sizing: border-box;
    }
    
    .el-loading-mask {
        z-index: 9999 !important;
    }
    
    #ShopList {
        .filters {
            margin: 0 0 20px 0;
            border: 1px #efefef solid;
            padding: 10px;
            background: #f9f9f9;
            .filter {
                display: inline-block;
                width: auto;
                padding: 10px;
                border-radius: 5px;
                .el-select {
                    display: inline-block;
                }
            }
            .el-input {
                width: 150px;
                display: inline-block;
            }
        }
        .pagination-wrapper {
            text-align: center;
            padding: 30px;
        }
    }
</style>